<template>
  <!-- 菜单管理 -->
  <div class="app-container">
    <div class="app-wrap">
      <div class="top-btn flexs">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="(isShowDetails = true), (checkedItem = null)">新增</el-button>
        <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
      </div>
      <el-table v-loading="listLoading" :data="menuDataList" element-loading-text="Loading" border fit highlight-current-row :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id"
       @current-change="handleCurrentChange" :header-cell-style="{ background: '#ecf5ff', color: '#000000' }" style="height: 78vh;overflow: auto;">
        <el-table-column align="center" type="index" width="50">
          <template slot-scope="scope">
            <el-radio v-model="scope.row.isChecked" :label="true">{{"" }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="菜单名称">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>{{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="id" label="ID" width="90"/>
        <el-table-column align="center" prop="name" label="路由名称" />
        <el-table-column align="center" prop="path" label="路由地址" />
        <el-table-column align="center" prop="icon" label="菜单图标" width="240">
          <template slot-scope="scope">
            <i :class="scope.row.icon" style="font-size: 21px"></i>
            【{{scope.row.icon}}】
          </template>
        </el-table-column>
        <el-table-column align="center" prop="parent_id" label="菜单等级" width="120">
          <template slot-scope="scope">
            <span v-show="!scope.row.parent_id" style="color: red">一级菜单</span>
            <span v-show="scope.row.parent_id && scope.row.children" style="color: green">二级菜单</span>
            <span v-show="scope.row.parent_id && !scope.row.children" style="color: #E6A23C">三级菜单</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="创建日期" width="200" />
        <el-table-column align="left" prop="operation" label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="编辑" placement="top-start">
              <el-button size="mini" type="warning" @click.stop="editItem(scope.row)"><i class="el-icon-edit-outline" /></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top-start">
              <el-button size="mini" type="danger" @click.stop="deleteItem(scope.row)"><i class="el-icon-delete" /></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :menuFirstDataList="menuFirstDataList" :menuDataList="menuAllDataList" :data="checkedItem"></page-details>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import PageDetails from './page-details.vue'
import {
  menuList,
  menuDel,
} from '@/api/system.js'
export default {
  name: 'menus',
  components: {
    PageDetails
  },
  data () {
    return {
      menuDataList: [],
      menuAllDataList: [],
      menuFirstDataList: [],
      menuSecondDataList: [],
      checkedItem: null,
      listLoading: false,
      isShowDetails: false,
      inputVal: '',
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 500,
      },
    }
  },
  created () {
    // this.getDataList()
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 获取菜单管理
    getDataList () {
      let that = this;
      that.menuDataList = [];
      that.menuFirstDataList = [];
      that.menuSecondDataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      menuList(that.listQuery).then(function (res) {
        if (res.code==1) {
          res.data.list.forEach(item => {
            // 一级菜单
            if (!item.parent_id) {
              that.menuFirstDataList.push(item)
            }
            // 二级菜单
            if (that.menuDataList.length > 0) {
              that.menuDataList.forEach(first => {
                if (first.id == item.parent_id) {
                  that.menuSecondDataList.push(item)
                }
              })
            }
          })
          that.menuDataList = that.recursiveTree(res.data.list)
          that.menuAllDataList=res.data.list
          that.currentTotal = res.data.total
        }
        that.listLoading = false
      }).catch((error) => {
        that.listLoading = false
        that.$message.error(error.msg)
      })
    },
    // 编辑
    editItem (row) {
      let that = this;
      that.isShowDetails = true
      that.checkedItem = row
      that.handleCurrentChange(row)
    },
    // 删除
    deleteItem (row) {
      let that = this;
      that.handleCurrentChange(row)
      that.$confirm(`是否删除【${row.title} (${row.name})】菜单`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        menuDel({
          id: row.id
        }).then(function (res) {
          that.getDataList()
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => { });
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val;
      this.menuDataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
          if (item.children) {
            item.children.map(first => {
              first.isChecked = false
            })
          }
        } else {
          item.isChecked = false
          if (item.children) {
            item.children.map(first => {
              if (first.id === val.id) {
                first.isChecked = true
              } else {
                first.isChecked = false
              }
            })
          }
        }
      })
    },
    // 递归处理菜单
    recursiveTree (menuList = []) {
      function loop (key, dep = 1) {
        const arr = []
        menuList?.forEach(item => {
          if (item.parent_id == key) {
            item.dep = dep
            item.children = loop(item.id, dep + 1)
            arr.push(item)
          }
        })
        return arr
      }
      return loop(0)
    },
    // 是否是二级
    menuSecond(cellValue){
      return (this.menuSecondDataList.find((item) => item.id === cellValue)?.name || "");
    },
    // 隐藏详情
    onHideDetails (show) {
      this.isShowDetails = false
      if (show) {
        this.getDataList()
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 500,
      }
      this.getDataList('');
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>

</style>
